@use 'var';
@use 'sass:color';

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin remove-focus {
  &:focus {
    outline: none;
  }
}

// $axis: 'b' -- both, 'm' -- main axis, 'c' -- cross axis
@mixin flex-center($axis: 'b', $column: false) {
  display: flex;
  flex-direction: if($column, column, row);
  justify-content: if($axis == 'b' or $axis == 'm', center, flex-start);
  align-items: if($axis == 'b' or $axis == 'c', center, flex-start);
}

@mixin focus($width: 1px, $color: var.$focus-light) {
  &:focus-visible {
    border-color: $color;
    box-shadow: 0 0 0 $width $color;
  }

  @supports not selector(:focus-visible) {
    &:focus {
      border-color: $color;
      box-shadow: 0 0 0 $width $color;
    }
  }
}

@mixin transition($property: background-color, $duration: 0.15s, $timing-function: ease-in-out) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing-function;
}

@mixin border($border: 'border', $width: 1px, $transition: false) {
  #{$border}: $width solid var.$border-light;
  @if $transition {
    @include transition(border-color);
  }
}

@mixin scrollbar($size: 7px, $dimension: 'width') {
  // Chrome, Safari, Edge
  &::-webkit-scrollbar {
    #{$dimension}: $size;
  }
  &::-webkit-scrollbar-thumb {
    background-color: color.scale(var.$border-light, $lightness: -15%);
  }
  &::-webkit-scrollbar-track {
    background-color: var.$border-light;
  }
}

@mixin scrollbar-dark {
  &::-webkit-scrollbar-thumb {
    background-color: color.scale(var.$border-dark, $lightness: 25%);
  }
  &::-webkit-scrollbar-track {
    background-color: var.$border-dark;
  }
}
